<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0"/>
	<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
	<meta name="Keywords" content="sneaker 球鞋新闻 发售 论坛 社区 正品球鞋 板鞋 复古 篮球鞋 球鞋评测 运动鞋 正品 NIKE 乔丹 AJ AIR JORDAN NEW BALANCE 潮流 新百伦 asics" />
	<meta name="Description" content="Niubility中文站是最大最专业的SNEAKER资讯和信息交流社区，有最新的潮流新闻、球鞋发售信息，也有SNEAKER爱好者的交流。信息覆盖NIKE、ADIDAS、AIR JORDAN、NEW BALANCE、ASICS、CONVERSE、VANS等众多品牌。"/>
	<title>球鞋展示</title>
	<link rel="icon" href="img/icons/logo.ico" type="image/x-icon" />
    	<link rel="stylesheet" href="css/normalize.css">
		<link rel="stylesheet" type="text/css" href="css/default.css">
  		
		<style type="text/css">
		#gallery-wrapper {
		position: relative;
		max-width: 75%;
		width: 75%;
		margin:50px auto;
		}
		img.thumb {
		width: 100%;
		max-width: 100%;
		height: auto;
		}
		.white-panel {
		cursor: pointer;
		position: absolute;
		background: white;
		border-radius: 5px;
		box-shadow: 0 1px 2px rgba(0,0,0,0.3);
		padding: 10px;
		}
		.white-panel h1 {
		font-size: 1em;
		}
		.white-panel h1 a {
		color: #A92733;
		}
		.white-panel:hover {
		box-shadow: 1px 1px 10px rgba(0,0,0,0.5);
		margin-top: -5px;
		-webkit-transition: all 0.3s ease-in-out;
		-moz-transition: all 0.3s ease-in-out;
		-o-transition: all 0.3s ease-in-out;
		transition: all 0.3s ease-in-out;
		}
		#picShow{
			text-align: center;
			border: 5px solid #000;
			display: none;
			position: relative;

		}
		.box{
			width: 800px;height: 600px;
			overflow: hidden;

		}
		#picShow ul{
			padding: 0;
			margin: 0;
			position: relative;

		}
		#picShow ul li{padding: 0 10px;
			width: 800px;height: 600px;
			float: left;
			list-style: none;
			position: absolute;background-color: #000;
		}

		#picShow ul li.active{
			z-index: 22;
		}
		#picShow ul li p{
			color: #fff;
		}
		#picShow ul li img{
			width: 100%;height: 87%;
		}
		.right,.left{
			cursor: pointer;
			color: #fff;
			top: 45%;
			position: absolute;font-size: 80px;
		}
		.right:hover,.left:hover{
			color: #000;
		}
		.left{
			left: -15%;
		}
		.right{
			right: -15%;
		}
		#osx-overlay
		{
			background-color: #000;
		}
		#picShow a.simplemodal-close{
			z-index: 33;
			position: absolute;right: 0;top: 0;
			display: block;width: 32px;height: 32px;
			background: url(img/album/close.png) no-repeat;
		}
  		</style>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery-1.8.0.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/simplemodal/1.4.4/jquery.simplemodal.min.js"></script>
    <script src="js/pinterest_grid.js"></script>
    <script>
   	$(function(){
//		瀑布流初始化
			$("#gallery-wrapper").pinterest_grid({
				no_columns: 4,
                padding_x: 10,
                padding_y: 10,
                margin_bottom: 50,
                single_column_breakpoint: 700
			});
			//图片轮播图显示

		$("#picShow").find("ul").width(length);
		$(".white-panel").bind("click",function (e) {
			if($(window).width()<1055){
				return false;
			}
			$("#picShow").modal({
				overlayId: 'osx-overlay',
				opacity: 80,
				overlayClose: true
			});
			var $li=$("#picShow").find("ul li");
			var i=0;

			$(".left").bind("click",function () {
				i--;
				if(i==-1){
					i=4;
				}
					$li.eq(i).show().siblings().hide();
			});
			$(".right").bind("click",function () {
				i++;
				if(i==5){
					i=0;
				}
					$li.eq(i).show().siblings().hide();
			})
		})


		});
    </script>
</head>
<body>
<header>
	<audio controls    id="music" hidden="true">
		<source src="audio/wake.mp3" type="audio/mpeg" >
		<!--<source src="MP3/1.C(do).ogg" type="audio/ogg">-->
		<!--<embed height="50" width="100" src="">-->
	</audio>
</header>
<section id="gallery-wrapper">
		<article class="white-panel" >
			<img src="img/album/ad_OG.jpg" alt="球鞋图" class="thumb"/>
			<h1><a href="#">鞋 1</a></h1>
	  		<p>这双鞋好帅</p>
		</article>
		<article class="white-panel">
			<img src="img/album/expensive.jpg" alt="球鞋图" class="thumb"/>
			<h1><a href="#">鞋 2</a></h1>
			<p>这双鞋好酷</p>
		</article>
		<article class="white-panel">
			<img src="img/album/NB.jpg" alt="球鞋图" class="thumb"/>
			<h1><a href="#">鞋 3</a></h1>
			<p>这双鞋好骚</p>
		</article>
		<article class="white-panel">
			<img src="img/album/NMDR1.jpg" alt="球鞋图" class="thumb"/>
			<h1><a href="#">鞋 4</a></h1>
			<p>这双鞋好靓</p>
		</article>
		<article class="white-panel" >
			<img src="img/album/NMD2.jpg" alt="球鞋图" class="thumb"/>
			<h1><a href="#">鞋 5</a></h1>
			<p>这双鞋好牛b</p>
		</article>
		<article class="white-panel" >
			<img src="img/album/ow.jpg" alt="球鞋图" class="thumb"/>
			<h1><a href="#">鞋 6</a></h1>
			<p>这双鞋好酷</p>
		</article>
		<article class="white-panel">
			<img src="img/album/6-161203104349-lp.jpg" alt="球鞋图" class="thumb"/>
			<h1><a href="#">鞋 7</a></h1>
			<p>这双鞋好靓</p>
		</article>
		<article class="white-panel">
			<img src="img/album/NMD.jpg" alt="球鞋图" class="thumb"/>
			<h1><a href="#">鞋 8</a></h1>
			<p>这双鞋好骚</p>
		</article>
		<article class="white-panel">
			<img src="img/album/pureB.jpg" alt="球鞋图" class="thumb"/>
			<h1><a href="#">鞋 9</a></h1>
	  		<p>Description 9</p>
		</article>
		<article class="white-panel">
			<img src="img/album/Vlone.jpg" alt="球鞋图" class="thumb"/>
			<h1><a href="#">鞋 10</a></h1>
			<p>这双鞋好骚</p>
		</article>
		<article class="white-panel">
			<img src="img/album/panda.jpg" alt="球鞋图" class="thumb"/>
			<h1><a href="#">鞋 11</a></h1>
			<p>这双鞋好骚</p>
		</article>
		<article class="white-panel">
			<img src="img/album/penpa.jpg" alt="球鞋图" class="thumb"/>
			<h1><a href="#">鞋 12</a></h1>
			<p>这双鞋好酷</p>
		</article>
		<article class="white-panel">
			<img src="img/album/ow13.jpg" alt="球鞋图" class="thumb">
			<h1><a href="#">鞋 13</a></h1>
			<p>这双鞋好骚</p>
		</article>
		<article class="white-panel">
			<img src="img/album/chaop.jpg" alt="球鞋图" class="thumb"/>
			<h1><a href="#">鞋 14</a></h1>
	  		<p>Description 14</p>
		</article>
		<article class="white-panel">
			<img src="img/album/wa.jpg" alt="球鞋图" class="thumb"/>
			<h1><a href="#">鞋 15</a></h1>
			<p>这双鞋好酷</p>
		</article>
		<article class="white-panel">
		<img src="img/album/aj.jpg" alt="球鞋图" class="thumb"/>
		<h1><a href="#">鞋 16</a></h1>
			<p>这双鞋好贵</p>
		</article>

	</section>
<!--图片轮播-->
<div id="picShow">
	<span  class="left"><</span>
	<span  class="right">></span>
	<div class="box">
	<ul>
		<li class="active"><img src="img/aj.jpg" alt="这是一双xx鞋" >
		<p>这双鞋好酷啊</p></li>
		<li><img src="img/album/expensive.jpg" alt="球鞋图" /><p>这双鞋好贵啊</p></li>
		<li><img src="img/album/NB.jpg" alt="球鞋图" /><p>这双鞋好骚啊</p></li>
		<li><img src="img/album/wa.jpg" alt="球鞋图" /><p>这双鞋好牛啊</p></li>
		<li><img src="img/album/NMD2.jpg" alt="球鞋图"/><p>这双鞋好贵啊</p></li>
	</ul>
	</div>
	<a href="#" class="simplemodal-close"></a>
</div>
<script type="text/javascript">
	//bgm播放
	var music=document.getElementById("music");
	setTimeout(function () {
		music.play()
	},1000)
</script>
</body>
</html>